<template>
  <view :class="['p-store', 'is-new-template']" v-if="storeInfo">
    <view class="_join" @click="onStore(storeInfo)" v-if="storeEntrance">
      <view class="_avatar">
        <x-image v-if="isSaas" :src="storeLogo" />
        <x-image v-else :src="storeInfo.storeLogo" />
      </view>
      <view class="md">
        <view class="top">
          <text class="line-clamp-1" style="margin-right: 6px;font-weight: bold;">{{ storeInfo.storeName || appName }}</text>
        </view>
        <view class="_info">
          <view class="flex">
            <text style="margin-right: 16px;">商品数量 {{ numberFormat(storeInfo.productCount) }}</text>
            <text>销量 {{ numberFormat(storeInfo.productSales) }}</text>
          </view>
          <view v-if="!isSaas" class="_button">进店逛逛</view>
        </view>
      </view>
    </view>
    <view class="_goods-list" v-if="storeRecommend">
      <p-goods-list :list="goodsList" />
    </view>
  </view>
</template>

<script>
import $sr from '@/utils/x-sr';
import config from '@/config';
import PGoodsList from '../p-goods-list';
import XIcon from '@/components/x-icon';
import XImage from '@/components/x-image';
import XTools from '@/utils/x-tools';

export default {
  name: 'PStore',
  components: {
    XIcon,
    XImage,
    PGoodsList
  },
  props: {
    storeId: {
      type: [String, Number],
      default: ''
    },
    productId: {
      type: [String, Number],
      default: ''
    },
    storeInfo: {
      type: Object,
      default: () => {}
    },
    storeRecommend: {
      type: [Object, String],
      default: () => {}
    },
    storeEntrance: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isSaas: config.project === 'saas',
      storeLogo: config.headImg,
      appName: config.appName,
      goodsList: []
    };
  },
  created() {
    this.getStoreProductRelated();
  },
  methods: {
    numberFormat: XTools.numberFormat,
    //  获取店铺信息
    async getStoreInfo() {
      const params = {
        storeId: this.storeId
      };
      this.$http({
        url: '/account/store/base/info',
        method: 'get',
        report: false,
        data: params
      }).then(res => {
        this.storeInfo = res.data;
        this.getStoreProuduct();
      }).catch(err => {
        console.log(err);
      });
    },
    // 获取店铺商品
    // 店铺商品：优先使用关联商品，不足6个再使用店铺商品补
    getStoreProductRelated() {
      this.$http({
        url: '/product/app/spu/related',
        report: false,
        data: {
          productId: this.productId
        }
      }).then(async(res) => {
        const list = res.data ? res.data : [];
        if (list.length < 6) {
          // 关联商品不足6个时补齐6个商品
          const spu = await this.getStoreProduct();
          if (spu && spu.length) {
            list.push(...spu.slice(0, 6 - list.length));
          }
        }
        list.forEach(item => {
          $sr.trackProductCard('expose_sku_component', item);
        });
        this.goodsList = list;
      });
    },
    // 获取店铺全部商品列表
    async getStoreProduct() {
      try {
        const { data } = await this.$http({
          url: '/product/app/spu/list',
          report: false,
          data: {
            storeId: this.storeId,
            pageSize: 6
          }
        });
        return data || [];
      } catch (e) {
        return [];
      }
    },
    onStore() {
      if (this.isSaas) return false;
      this.$http({
        url: '/product/store/page/app/detail',
        data: {
          storeId: this.storeId
        },
        report: true,
        alarm: true
      }).then(res => {
        if (res.data) {
          uni.navigateTo({
            url: `/pages/decorate/index?id=${res.data.id}` // 微页面（自定义配置的商城主页）
          });
        } else {
          uni.navigateTo({
            url: `/packages/store/index?storeId=${this.storeId}` // 商城的店铺主页
          });
        }
      }).catch(() => {
      });
    }
  }
};
</script>

<style lang="scss" scoped>
// 店铺/商品
.p-store{
  width: 100%;background: #fff; margin-top:16px;

  &.is-new-template{
    ._join{
      margin: 0 var(--padding);
      background: #F7F8FA;
      border-radius: 20px;
      padding: 20px;
      ._avatar{
        width: 140px;
        height: 140px;
        border-radius: 16px;
      }

      .md{
        min-height: 140px;
      }

      ._button{
        color: #FFFFFF;
        background: #EB441F;
      }

      ._info{
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }
  }
  ._join{
    display: flex; align-items: center; padding: 16px 24px; border-bottom: 1px solid #F7F8FA;
    ._avatar{
      width: 70px;
      height: 70px;
      border-radius: 6px;
      overflow: hidden;
    }
    .md{
      flex:1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-left: 12px;
      font-size: 30px;
      line-height: 44px;
      color: #323233;
      margin-right: 8px;
      .top{
        display: flex;
        align-items: center;
        ._auth{
          display: flex;
          flex-shrink: 0;
          align-items: center;
          height: 32px;
          background: #502D10;
          border-radius: 6px;
          color: #FFFFFF;
          font-size: 22px;
          padding: 1px 14px 1px 12px;
          ._text{
            margin-left: 4px;
          }
        }
      }
      ._info{
        font-size: 24px;
        color: #646464;
      }
    }
    ._button{
      width: 140px;
      height: 48px;
      line-height: 48px;
      font-size: 26px;
      text-align: center;
      background: #fff;
      color: #EB441F;
      border-radius: 100px;
      border: 1px solid #EB441F;
    }
  }
  ._join:last-child{
    border: none;
  }
  ._goods-list{
    margin-top: 24px;
    padding: 0 24px;
  }
}
</style>
